<template>
    <div id="system-box">
        <el-header>阿里妈妈车位租赁管理系统</el-header>
        <div class="all">
            <div class="green-border">
                <h3>管理员登录</h3>
                <br />
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名:">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密 码:">
                        <el-input v-model="form.password" type='password'></el-input>
                    </el-form-item>
                    <el-form-item id="login-box">
                        <el-button type="success" @click="doLogin(form)"
                            >立即登录</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <el-footer></el-footer>
    </div>
</template>

<script>
import apis from '../../http/apis/apis'
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("admins");

export default {
    data() {
        return {
            form: {
                username: "",
                password: "",
            },
        };
    },

    methods: {
        ...mapActions(["login"]),
        async doLogin(lessors) {
            const data = await this.login(lessors);
            console.log(data);
            if (data.status) {
                alert("登录成功");
                localStorage.token = data.token;
                this.$router.push("/AdminsSystem");
                this.logs(data)
            } else {
                alert(data.message);
            }
        },
        // 记录登录日志
        async logs(data){
          const _id = data[0]._id
          const msg = await apis.logs.addLogs({_id})
        }
    },
};
</script>

<style scoped  lang='scss'>
#system-box {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .el-header {
        height: 50px;
        background: lightgreen;
        line-height: 50px;
        font-size: 30px;
        font-weight: bolder;
    }
    .all {
        flex: 1;
        .green-border {
            border: rgb(20, 197, 20) 2px solid;
            height: 350px;
            width: 500px;
            padding: 60px 50px;
            margin: 70px auto;
            border-radius: 20px;
            #login-box {
                text-align: center;
                margin-left: -80px;
            }
        }
    }
    .el-footer {
        height: 50px;
        background: lightgreen;
    }
}
</style>